<template>
	<div class="main">
		<!-- <scroller> -->

		<div class="adOuterWrap">
			<div class="back">
				<go-back aa='../evaluation/ad'></go-back>
				<h2>生涯测评</h2>

			</div>
			<div class="adWrap">
				<scroller style="top: 1.6rem;">
					<div>
						<div class="adBoxs">
							<div class="listBox">
								<span class="txtBox" @click="gotest">
									<p>请您完成以下 5 项测试，最终报告将根据这 5 项测试为推算依据。</p>
									<!-- <b>点击继续</b> -->
								</span>
								<div class="progressBar flex-h" v-for="(item,index) in sydata" :key="index">
									<div class="sp1">
										<span :class="['barTitle',item.type?'barTitleAce':'']">
											<b v-show="item.type===false">{{item.rank}}</b>
											<b v-show="item.type"><img src="~/static/iconsvgs/career_synthesize_icon_complete.png" alt=""></b>
										</span>
										<span class="barLine" v-show="index<4"></span>
									</div>
									<div class="sp2 flex1">
										<div class="spPaBot">
											<div class="sp2Box flex-h">
												<div class="flex1 sp2son1">
													<div class="smSp2Box">


														<h3>{{item.title}}</h3>
														<span class="spanptx">
															<p>{{item.desc}}</p>
														</span>
													</div>
													<button @click="gotos('createTest',item.rank)" :class="['sonbtn1',item.type?'':'btnActive']">{{item.type?'再次测试':'开始测试'}}</button>
												</div>
												<div class="sp2son2">
													<img v-lazy="item.imgsrc" alt="">
													<button v-show="item.type" class="sonbtn1" @click="gotos('singleRecord',item.rank,item.gos)">查看报告</button>
												</div>
											</div>

										</div>

									</div>
								</div>
							</div>

						</div>

						<div style="width: 100%;height: 3.1rem;"></div>
					</div>

				</scroller>
				<div class="fixBoter">
					<div class="fix1 flex-h">
						<span class="flex1 sp1"><i>测试完成</i><b>{{getNum}}</b><em>/5</em></span>
						<span class="flex1 sp2">
							<!-- <i>生成剩余次数:</i><b>3</b> -->
							</span>
					</div>
					<div class="fixbtn">
						<button @click="getGoal" :class="getNum===5?'wcl':'nocl'">生成新的综合测试结果</button>
					</div>
				</div>
				<!-- </div> -->
			</div>
			<!-- <div class="adBot">
				<span @click="goto('reportRecord')">进入生涯测评</span>
			</div> -->
		</div>
		<!-- </scroller> -->
	</div>
</template>
<script>
	import ls from 'store2';
	import {} from 'vux'
	import {
		format
	} from '~/plugins/filter';
	import goBack from '~/components/goBack'
	import axios1 from '~/plugins/axios1'
	// import reportList from '~/components/reportList'
	export default {
		head: {
			title: '生涯测评'
		},
		components: {
			goBack,
			// reportList
		},
		data() {
			return {
				prUrl:ls.get('preUrl'),
				sydata: [{
						rank: 1,
						title: '职业兴趣测试',
						desc: '兴趣是最好的老师，找到自己最感兴趣的事情，为以后的人生奠定方向。',
						imgsrc: require('~/static/images/career_synthesize_pic_1.png'),
						type:false,
						gos:1
					},
					{
						rank: 2,
						title: '职业价值观测试',
						desc: '每个人对未来的追求都不同，找到未来人生的意义，让生命绽放。',
						
						imgsrc: require('~/static/images/career_synthesize_pic_2.png'),
						type:false,
						gos:3
					},
					{
						rank: 3,
						title: 'MBTI性格测试',
						desc: '性格乃人之行为习惯，辨识自己的性格，找到符合性格的学习方式和未来专业方向',
						imgsrc: require('~/static/images/career_synthesize_pic_3.png'),
						type:false,
						gos:4
					},
					{
						rank: 4,
						title: '多元智能测试',
						desc: '每个人都是独一无二的，挖掘自己的天赋特长，激发自己无限潜能。',
						imgsrc: require('~/static/images/career_synthesize_pic_4.png'),
						type:false,
						gos:2
					},
					{
						rank: 5,
						title: '成长环境测试',
						desc: '家庭对一个人的成长影响极大，家庭关系的不同直接影响到我们未来的专业和职业选择。',
						imgsrc: require('~/static/images/career_synthesize_pic_5.png'),
						type:false,
						gos:5
					}
				],
				getNum:0,
				ids:0
		
			}
		},
		created() {
			this.commonJs.gologins();
			this.$vux.loading.show({text: '正在加载'})
			this.showDanList()
		},
		mounted: function() {
			if(this.commonJs.isTerminal()=='isAndroid'){
				if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
		},
		destroyed() {
			// this.commonJs.xahui('../evaluation/ad')
				window.removeEventListener('popstate', this.fun, false);
		},
	
		watch: {

		},
		methods: {
				fun() {
				this.$router.replace({
					path: '../evaluation/ad'
				
				})
			
			},
			gotest(){
				ls.set('preUrl','../evaluation/evaluationEntry')
				this.commonJs.gosto('resultDetails')
			}, 
			showDanList() {
				let obj = {
					userId:ls.get('userData').userId,
					userType:ls.get('userType')
				}
				
				axios1.posts('/career/getEvaluation?userType='+ls.get('userType')).then(res => {
					if (res.code === '0') {
						let adata = res.data;
						let str = '';
						for (var x in adata) {
							str += x
						}
						if (str.indexOf('interest') > -1) {
							console.log(str.indexOf('interest'))
							this.sydata[0].type=true;
							this.getNum+=1
							// this.zyxq = true;
						}
						if (str.indexOf('character') > -1) {
							console.log(str.indexOf('character'))
							this.sydata[2].type=true;
							this.getNum+=1
						}
						if (str.indexOf('grown') > -1) {
							console.log(str.indexOf('grown'))
							// this.czhj = true;
							this.sydata[4].type=true;
							this.getNum+=1
						}
						if (str.indexOf('intelligence') > -1) {
							console.log(str.indexOf('intelligence'))
							// this.dyzn = true;
							this.sydata[3].type=true;
							this.getNum+=1
						}
						if (str.indexOf('worth') > -1) {
							console.log(str.indexOf('worth'))
							this.sydata[1].type=true;
							this.getNum+=1
						}

						this.$vux.loading.hide();
						// console.log(str,this.sydata)
						// console.log(adata)
						// console.log('ssssgetnum',this.getNum)
						if(res.data){
							this.ids=res.data.id;
						}
						
					}
				}).catch((error) => {
					this.$vux.toast.text(error);
					this.$vux.loading.hide();
				})

			},
			gotos(url,typ,abx){
				ls.set('testTypes',typ);
				ls.set('preUrl','../evaluation/evaluationEntry')
				this.commonJs.gosto(url,typ)
			},
			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				})
			},
			getGoal(){
				if(this.getNum<5){
					return false;
				}
				this.postZongheGoal()
				console.log('dianjil ')
			},
			postZongheGoal() {
				axios1.post('/career/saveMultiple', {
						"generate": 1,
						"id": this.ids
				}, true).then(res => {
					if (res.code==='0') {
						if(res.message=='操作成功'){
							this.$vux.toast.text('您的结果生成成功');
							setTimeout(()=>{
								ls.set('zhId',this.ids)
								ls.set('preUrl','../evaluation/evaluationEntry')
								this.commonJs.gosto('resultDetails')
							},50)
								
						}
							
					}
					if(res.code==='1200003'){
						this.$vux.toast.text(res.message);
						this.$vux.loading.hide();
					}
					// this.$vux.toast.text(res.message);
				}).catch((error) => {
				
					this.$vux.toast.text('暂无数据');
						this.$vux.loading.hide();
				})
			},

		},
		beforeDestroy() {

		}

	}
</script>

<style scoped lang="less">
	.adOuterWrap {
		width: 7.5rem;
		height: 100vh;
		background: #fff;
		flex-direction: column;
		overflow: hidden;

		.adWrap {

			padding: 0 0.3rem;
			width: 7.5rem;
			box-sizing: border-box;

			.adBoxs {
				width: 100%;
				height: auto;

				.listBox {
					height: auto;
					padding: 0.3rem 0.3rem;
					box-sizing: border-box;

					.txtBox {
						display: block;
						width: 100%;
						height: auto;
						background: rgba(255, 241, 184, 1);
						border-radius: 0.1rem;
						opacity: 0.6;
						text-align: center;
						padding: 0.15rem 0.2rem;
						box-sizing: border-box;
						margin-bottom: 0.3rem;

						p {
							font-size: 0.22rem;
							line-height: 0.3rem;
							font-weight: bold;
							color: rgba(34, 34, 34, 1);

						}

					}

					.progressBar {
						width: 100%;
						height: auto;

						align-items: stretch !important;

						.sp1 {
							width: 0.8rem;

							position: relative;

							.barTitle {
								display: block;
								width: 0.6rem;
								height: 0.6rem;
								background: #fff;
								position: absolute;
								left: 0;
								top: 0;
								z-index: 2;

								b {
									text-align: center;
									display: block;
									width: 0.6rem;
									height: 0.6rem;
									border-radius: 50%;
									border: 0.08rem solid rgba(238, 238, 238, 1);
									box-sizing: border-box;
									font-weight: bold;
									color: rgba(137, 204, 78, 1);
									font-size: 0.28rem;
									font-family: 'DIN-Bold';
								}

							}

							.barTitleAce {

								b {
									border: none;
									background: rgba(137, 204, 78, 1);
									box-shadow: 0px 0.06rem 0.16rem 0px rgba(137, 205, 79, 0.3);
									overflow: hidden;

									img {
										display: block;
										width: 0.3rem;
										height: 0.3rem;
										margin: 0.15rem auto;
									}
								}
							}


							.barLine {
								position: absolute;
								display: block;
								height: 100%;
								width: 0.1rem;
								background: rgba(238, 238, 238, 1);
								left: 0.25rem;
								top: 0;
								z-index: 1
							}
						}

						.sp2 {
							width: 100%;
							height: auto;
							align-items: initial !important;
							padding-bottom: 0.3rem;
							overflow: hidden;

							.spPaBot {

								background: rgba(255, 255, 255, 1);
								box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
								border-radius: 0.1rem;

								height: auto;
								box-sizing: border-box;
								width: 98%;
								margin: 0.1rem auto;



							}

							.sp2Box {
								width: 100%;
								height: auto;
								padding: 0.3rem;
								box-sizing: border-box;

								.sp2son1 {
									.smSp2Box {
										height: 2.2rem;
									}

									h3 {
										font-size: 0.34rem;

										font-weight: bold;
										color: rgba(34, 34, 34, 1);
										line-height: 0.48rem;
									}

									.spanptx {
										display: block;
										padding-bottom: 0.2rem;
										margin-top: 0.2rem;

										p {
											font-size: 0.24rem;

											font-weight: 500;
											color: rgba(153, 153, 153, 1);
											line-height: 0.33rem;
										}
									}


								}

								.sp2son2 {
									width: 2.6rem;

									img {
										display: block;
										border: none;
										width: 1.7rem;
										height: 1.7rem;
										margin-left: 0.6rem;
										margin-bottom: 0.5rem;
									}
								}

								.sonbtn1 {
									width: 2.6rem;
									height: 0.7rem;
									border-radius: 0.1rem;
									border: 0.02rem solid rgba(137, 204, 78, 1);
									outline: none;
									text-align: center;
									line-height: 0.7rem;
									font-size: 0.26rem;
									font-weight: bold;
									color: rgba(108, 191, 32, 1);
									background: none;
								}

								.btnActive {
									background: rgba(137, 204, 78, 1);
									box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
									color: rgba(255, 255, 255, 1);
								}
							}

						}
					}

				}


			}
		}


	}

	.back {
		width: 100%;
		height: auto;

		h2 {
			padding: 0 0.3rem;
			box-sizing: border-box;
			display: block;
			height: 0.8rem;
			font-size: 0.44rem;

			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.8rem;
		}
	}

	.fixBoter {
		width: 7.5rem;
		height: 2.1rem;
		position: fixed;
		left: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -0.04rem 0.1rem 0px rgba(204, 204, 204, 0.2);
		z-index: 3;

		.fix1 {
			width: 100%;
			height: 1rem;
			padding: 0 0.9rem 0 0.3rem;
			box-sizing: border-box;

			.sp1 {
				i {
					font-size: 0.26rem;
					font-weight: bold;
					color: rgba(34, 34, 34, 1);

				}

				b {
					font-size: 0.4rem;
					font-weight: bold;
					color: rgba(108, 191, 32, 1);
					margin-left: 0.15rem;
				}

				em {
					font-size: 0.22rem;
					font-weight: bold;
					color: rgba(187, 187, 187, 1);

				}
			}

			.sp2 {
				text-align: right;

				i,
				b {
					font-size: 0.26rem;
					font-weight: bold;
					color: rgba(187, 187, 187, 1);

				}

				b {
					margin-left: 0.15rem;
				}
			}
		}

		.fixbtn {
			height: 0.8rem;
			width: 7.5rem;

			button {
				display: block;
				outline: none;
				border: none;
				height: 0.8rem;
				border-radius: 0.4rem;
				line-height: 0.8rem;
				
				padding: 0 0.5rem;
				font-size: 0.3rem;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				margin: 0 auto;
			}
			.wcl{
				background: rgba(108, 191, 32, 1);
			}
			.nocl{
				background: #eee;
			}
		}

		// filter:blur(0.2rem);
	}
</style>
